<!DOCTYPE html>

<!-- $Id: index.html 79 2012-03-14 12:55:47Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/><!-- .button -->
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.colorpicker - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

.foreground-colorpicker, .background-colorpicker {
	width: 1em;
	height: 2.6em;
	line-height: 2.2em;
	text-align: center;
}

.foreground-colorpicker > .letter, .background-colorpicker > .letter {
	color: white;
	font-weight: bold;
	margin-right: 0.4em;
	padding: 4px;
	margin-left: -4px;
	position: relative;
	top: 0.2em;
	text-shadow: none;
}

.foreground-colorpicker > .letter {
	color: red;
}

.background-colorpicker > .letter {
	background-color: red;
}








#ex1 { padding: 2em; margin-bottom: 1em; width: 9em; }

.toolbar > .button {
	float: left;
}


</style>


<script>

$(document).ready(function () {

	$('.toolbar .foreground-colorpicker').ajp$colorpicker({
		onchange: function (val, $button) {
			$('#ex1').css({ color: val })
		}
	})

	$('.toolbar .background-colorpicker').ajp$colorpicker({
		onchange: function (val, $button) {
			$('#ex1').css({ 'background-color': val })
		}
	})


})

</script>

</head>

<body>

	<div id="ex1">Select colors!</div>

	<div class="toolbar">
		<div class="button foreground-colorpicker"><span class="letter">A</span></div>
		<div class="button background-colorpicker"><span class="letter">B</span></div>
		<div class="clear"></div>
	</div>

</body>